.react-playground-editor {
  height: 100%;
  overflow: hidden;
  background-color: var(--border);

  &.hidden {
    display: none;
  }
}

.react-playground-editor-types-loading {
  position: absolute;
  top: 41px;
  right: 2px;
}

.dark .react-playground-editor {
  height: 100%;
  overflow: hidden;
  background-color: var(--border);

  .jsx-tag-angle-bracket {
    color: #808080;
  }

  .jsx-text {
    color: #d4d4d4;
  }

  .jsx-tag-name {
    color: #569cd6;
  }

  .jsx-tag-attribute-key {
    color: #9cdcfe;
  }
}

.light .react-playground-editor {
  height: 100%;
  overflow: hidden;
  background-color: var(--border);

  .jsx-tag-angle-bracket {
    color: #800000;
  }

  .jsx-text {
    color: #000;
  }

  .jsx-tag-name {
    color: #800000;
  }

  .jsx-tag-attribute-key {
    color: #f00;
  }
}
